<!DOCTYPE html>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="contextPath" value="${pageContext.request.contextPath}" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>添加用户</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link rel="stylesheet" type="text/css" href="${contextPath}/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="${contextPath}/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="${contextPath}/css/bootstrapValidator.min.css" />
<link rel="stylesheet" type="text/css" href="${contextPath}/css/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet" type="text/css" href="${contextPath}/css/public.css">
<script type="text/javascript" src="${contextPath}/js/jquery.min.js"></script>
<script type="text/javascript" src="${contextPath}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${contextPath}/js/common.js"></script>
<script type="text/javascript" src="${contextPath}/js/bootstrapValidator.min.js"></script>
<script type="text/javascript" src="${contextPath}/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="${contextPath}/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<body>
	<div class="container-fluid">
		<div class="row">
			<!-- form: -->
			<section>
				<div class="col-lg-8 col-md-12">
					<div class="page-header">
						<h2>添加地址</h2>
					</div>
					<form action="${contextPath}/security/addAddress" method="post" id="addAddress" name="addAddress" role="form" class="form-horizontal">
						<div class="form-group">
							<!-- 详细地址 -->
							<label for="customerId" class="col-lg-3 col-md-2 control-label">客户ID：</label>
							<div class="col-lg-4 col-md-6">
								<input type="text" class="form-control" readonly="readonly" name="customerId" id="customerId" value="${requestScope.customerId}" autocomplete="off">
							</div>
						</div>
						<div class="form-group">
							<!-- 类型 -->
							<label for=type class="col-lg-3 control-label">地址：</label>
							<div class="col-lg-3">
								<select class="form-control" id="shi" name="shi" onchange="openQuxian()">
								</select>
							</div>
							<div class="col-lg-3">
								<select class="form-control" id="quxian" name="quxian">
								</select>
							</div>
						</div>
						<div class="form-group">
							<!-- 详细地址 -->
							<label for="detailedAddress" class="col-lg-3 control-label">详细地址：</label>
							<div class="col-lg-4">
								<input type="text" class="form-control" name="detailedAddress" id="detailedAddress" maxlength="11" placeholder="详细地址" autocomplete="off">
							</div>
						</div>
						<div class="form-group">
							<!-- 联系人 -->
							<label for="name" class="col-lg-3 control-label">联系人：</label>
							<div class="col-lg-4">
								<input type="text" class="form-control" name="name" id="name" maxlength="30" placeholder="联系人" autocomplete="off">
							</div>
						</div>
						<div class="form-group">
							<!-- 联系电话 -->
							<label for="telephone" class="col-lg-3 control-label">联系电话：</label>
							<div class="col-lg-4">
								<input type="text" class="form-control" name="telephone" id="telephone" maxlength="20" placeholder="电话" autocomplete="off">
							</div>
						</div>
						<div class="form-group">
							<div class="col-lg-9 col-lg-offset-3">
								<button type="submit" class="btn btn-success" id="add">添加</button>
								<button type="button" class="btn btn-primary" id="close">关闭</button>
							</div>
						</div>
					</form>
				</div>
			</section>
			<!-- :form -->
		</div>
	</div>
	<script type="text/javascript">
		var openQuxian = function(areaid) {
			var areaid = $("#shi").val();
			$.ajax({
				type : 'GET',
				data : {
					"code" : areaid
				},
				url : '${contextPath}/security/district',
				dataType : 'json',
				success : function(data) {
					$("#quxian").empty();
					$.each(data, function(i, item) {
						$("#quxian").append("<option value="+item.areaid+">" + item.areaname + "</option>");
					})

				}
			});
		}
		$(document).ready(function() {
			$.ajax({
				type : 'GET',
				data : {
					"code" : 649
				},
				url : '${contextPath}/security/district',
				dataType : 'json',
				success : function(data) {
					$.each(data, function(i, item) {
						$("#shi").append("<option value="+item.areaid+">" + item.areaname + "</option>");
					})
					openQuxian();
				}
			});

			$('.form_date').datetimepicker({
				language : 'zh-CN',
				linkField : "salesTime",
				endDate : new Date(),
				initialDate : new Date(),
				weekStart : 0,
				todayBtn : 1,
				autoclose : 1,
				startView : 2,
				minView : 2
			});
			$('.form_dater').datetimepicker('show');

			$("#close").click(function() {
				window.close();
			});
			//==================================================================================================================
			$('#addAddress').bootstrapValidator({
				live : 'enabled',
				submitButtons : 'button[type="submit"]',
				message : 'This value is not valid',
				feedbackIcons : {
					valid : 'glyphicon glyphicon-ok',
					invalid : 'glyphicon glyphicon-remove',
					validating : 'glyphicon glyphicon-refresh'
				},
				fields : {
					customerId : {
						validators : {
							notEmpty : {
								message : '用户不能为空'
							}
						}
					},
					detailedAddress : {
						validators : {
							notEmpty : {
								message : '详细地址不能为空'
							}
						}
					},
					name : {
						validators : {
							notEmpty : {
								message : '联系人不能为空'
							},
							stringLength : {
								min : 0,
								max : 30,
								message : '联系人不能超过30个汉字'
							}
						}
					},
					telephone : {
						validators : {
							notEmpty : {
								message : '联系电话不能为空,为手机号'
							},
							stringLength : {
								max : 11,
								message : '不能超过11位'
							}
						}

					}
				}
			});

			//$('#addCustomer').bootstrapValidator();
			$('#add').click(function() {
				var bootstrapValidator = $('#addAddress').data('bootstrapValidator');
				//手动触发验证
				bootstrapValidator.validate();
				if (bootstrapValidator.isValid()) {
					//表单提交的方法、比如ajax提交
					if(addAddress.submit()){
						alert("fff")
					}
				}

			});
		});
	</script>
</body>
</html>

